<template>
  <div class="box">
    <div>
      <el-card class="box-card" shadow="always">
        <el-container class="container-map-slider" v-loading="loading">
          <div id="map"></div>
          <el-container class="container-slider" direction="vertical">
            <div class="container-icon">
              <i class="el-icon-zoom-in"></i>
            </div>
            <el-slider
              id="slider-scale"
              v-model="sliderValue"
              vertical
              class="el-slider-scale"
              :show-tooltip="false"
              @input="sliderInput()"
              :max="90"
              :min="0"
            ></el-slider>
            <div class="container-icon">
              <i class="el-icon-zoom-out"></i>
            </div>
          </el-container>
        </el-container>
      </el-card>
    </div>

    <div>
      <el-card class="box-card card-nav" shadow="always">
        <div slot="header" class="clearfix">
          <el-tag>模式</el-tag>
        </div>

        <div class="card-nav-content">
          <label>光标模式: {{ mode[modeValue] }}</label>
          <!-- <el-button @click="dragMode">dragMode</el-button>
          <el-button @click="navMode">navMode</el-button>-->
          <div>
            <el-radio @change="dragMode" v-model="moderadio" label="1" border>拖拽</el-radio>
            <el-radio @change="navMode" v-model="moderadio" label="2" border>导航</el-radio>
          </div>
          <el-switch
            v-model="switchIsOrientation"
            @change="orientationBtnChange"
            active-text="选定方向"
            inactive-text="不选定方向"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :disabled="modeValue"
          ></el-switch>
        </div>
      </el-card>

      <el-card class="box-card" shadow="always">
        <div slot="header" class="clearfix">
          <el-tag>读取地图</el-tag>
        </div>

        <el-button @click="dialogTableVisible=true;btngetlist();">读取地图</el-button>

        <el-dialog title="读取地图文件列表" :visible.sync="dialogTableVisible">
          <div style="margin-top: 15px">
            <el-input placeholder="请输入内容" v-model="mapSelected" class="input-with-select">
              <el-select v-model="mapSelected" slot="prepend" placeholder="请选择">
                <div v-for="(item, index) in listofmap" :key="index">
                  <el-option :label="item" :value="item"></el-option>
                </div>
              </el-select>
              <el-button slot="append" icon="el-icon-check" @click="btnload()"></el-button>
            </el-input>
          </div>
        </el-dialog>
      </el-card>

      <el-card class="box-card" shadow="always">
        <div slot="header" class="clearfix">
          <el-tag>其他</el-tag>
        </div>
        <div>
          <el-switch
            v-model="showGrid"
            active-text="显示网格"
            inactive-text="不显示网格"
            @change="switchGrid"
          ></el-switch>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  createView,
  createNav,
  destroy,
  changeScale,
  addDragListener,
  removeDragListener,
  buildNavigator,
  removeNavigator,
  changeOrientation,
  addGird,
  removeGrid,
} from "../js/nav";
import {
  createKeyboardListener,
  destroyKeyboardListener,
} from "../js/keyboard";
import { getMapList, loadMap } from "../js/loadmap";
import { ros } from "../js/connect";
import { store } from "../state/store";
export default {
  data() {
    return {
      // 加载动画显示
      loading: false,
      // 滑块值
      sliderValue: 0,
      // drag or nav
      modeValue: true,
      moderadio: "1",
      mode: {
        true: "拖拽模式",
        false: "导航模式",
      },
      switchIsOrientation: false,
      // loadMap
      dialogTableVisible: false,
      listofmap: [],
      mapSelected: "",
      // grid
      showGrid: false,
    };
  },
  methods: {
    dragMode() {
      addDragListener();
      removeNavigator();
      this.modeValue = true;
    },
    navMode() {
      removeDragListener();
      buildNavigator();
      this.modeValue = false;
    },
    orientationBtnChange() {
      changeOrientation(this.switchIsOrientation);
      // 重启导航器使切换生效
      removeNavigator();
      buildNavigator();
    },
    sliderInput() {
      try {
        changeScale((100 - this.sliderValue) * 0.01);
      } catch (error) {
        console.log(error);
      }
    },
    btnload() {
      loadMap(this.mapSelected);
    },
    btngetlist() {
      getMapList(ros, this, function (self, array) {
        self.listofmap = array;
        // console.log(self.listofmap);
      });
    },
    switchGrid() {
      if (this.showGrid) {
        addGird();
      } else {
        removeGrid();
      }
    },
  },
  mounted() {
    createKeyboardListener(document);
    try {
      createView();
    } catch (error) {
      console.log(error);
    }
    // 加载动画
    this.loading = true;
    if (store.getStatusAction() == "Connected") {
      createNav(
        {
          url: store.getUrlAction(),
        },
        this,
        function (self) {
          // 加载动画关闭
          self.loading = false;
        }
      );
    }

    var that = this;
    setTimeout(function () {
      if (that.loading == true) {
        that.$notify.error({
          title: "错误",
          message: "连接超时，请检查连接状态",
        });
        // 加载动画关闭
        that.loading = false;
      }
    }, 10000);

    // 初始化网格
    try {
      this.switchGrid();
    } catch {
      console.log("grid create error");
    }

    // 初始化拖拽模式
    addDragListener();
  },
  destroyed() {
    removeDragListener();
    removeNavigator();
    destroyKeyboardListener(document);
    try {
      destroy();
    } catch (error) {
      console.log(error);
    }

    
  },
};
</script>

<style>
.card-nav {
  width: 320px;
}

.card-nav-content {
  line-height: 40px;
}
</style>
